import React, { Component } from "react";
// PureComponent用来代替Component
// 如果数据没有改动，不会自动渲染
// 只有类组件有生命周期
import Child from "./Child";

class App extends Component {
  //! 初始化阶段
  // constructor就是初始化阶段的生命周期
  // constructor这个函数是当这个类被实例化的时候就会自动执行，最先被执行
  constructor(props) {
    super(props);
    // 初始化state和props
    console.log("constructor");
    // props可以在这里作为stat的初始值进行使用
    this.state = {
      count: 10,
    };
    // this.xxx = this.xxx.bind();
    // this.ipt = createRef();
  }

  //! 挂载阶段
  // componentWillMount是过时了，被新的生命周期给替换了，16.3版本
  // 这里做不了什么事情
  // 不能做数据请求, 有可能会出现请求触发多次(因为16版本fiber算法)
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // this.setState({
    //   count: 20,
    // });
  }

  // render本身也是一个生命周期,不能省略，必须要返回jsx
  render() {
    // 做一些解构
    // 不能做数据请求，原因根上面一样的
    console.log("render");
    return (
      <>
        <h3>旧版生命周期</h3>
        <p>count: {this.state.count}</p>
        <Child count={this.state.count} />
      </>
    );
  }

  // 表示组件挂载完毕
  componentDidMount() {
    console.log("componentDidMount");
    setTimeout(() => {
      this.setState({
        count: 10,
      });
    }, 2000);
    // 数据请求只能在这里做
  }

  //! 更新阶段
  // 组件是否要更新
  // 必须要return一个布尔值
  // 可以控制组件是否要进行更新
  // 可以接收两个参数，nextProps,nextState
  // 性能优化的
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log("shouldComponentUpdate");
  //   // return true;
  //   // if (nextState.count === this.state.count) {
  //   //   return false;
  //   // } else {
  //   //   return true;
  //   // }
  //   return nextState.count !== this.state.count;
  // }

  // 也是在新版本被废弃
  UNSAFE_componentWillUpdate() {
    console.log(this.state.count);
    console.log("componentWillUpdate");
  }

  // 组件更新后
  // 在这里不要去改变state的值
  componentDidUpdate() {
    console.log(this.state.count);
    console.log("componentDidUpdate");
  }

  //! 卸载阶段
  // 销毁前
  componentWillUnmount() {
    // 要去清除定时器，websocket，事件监听，插件
  }
}

export default App;
